<div class="row">
    <!-- topic 的管理  -->
    <div class="col-lg-6">
        <div class="panel panel-success ">
            <div class="panel-heading">
                <i class="glyphicon glyphicon-th-list"></i> Topic 管理
            </div>
            <div class="panel-body">
                <div class="panel panel-primary ">
                    <div class="panel-heading">
                        <i class="glyphicon glyphicon-plus"></i> 创建
                    </div>
                    <div class="form-inline panel-body">
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-btn">
                                    <button type="button" id="clusterid1" data-cluster=""
                                            class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                            aria-expanded="false">选择集群 <span class="caret"></span></button>
                                    <ul class="dropdown-menu" role="menu">

                                        {% for k,v in  clusters.items %}
                                            <li><a href="#" data-cluster="{{ k }}"  data-namesvr="{{ v }}"
                                                   onclick="setClusterValue(this,'clusterid1')"> {{ k }} </a></li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                            <div class="input-group">
                                <input id="add-topic-input" type="text" class="form-control" placeholder="新增Topic名称">
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary" onclick="addTopic()">增加Topic</button>
                    </div>
                </div>
                <div class="panel panel-primary ">
                    <div class="panel-heading">
                        <i class="glyphicon glyphicon-minus"></i> 删除
                    </div>

                    <div class="panel-body form-inline">
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-btn">
                                    <button type="button" id="clusterid2" data-cluster=""
                                            class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                            aria-expanded="false">选择集群 <span class="caret"></span></button>
                                    <ul class="dropdown-menu" role="menu">
                                        {% for k,v in  clusters.items %}
                                            <li><a href="#" data-cluster="{{ k }}"  data-namesvr="{{ v }}"
                                                   onclick="setClusterValue(this,'clusterid2')"> {{ k }} </a></li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                            <div class="input-group">
                                <div class="input-group-btn">
                                    <button type="button" id="topicid1" data-cluster=""
                                            class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                            aria-expanded="false">选择Topic <span class="caret"></span></button>
                                    <ul class="dropdown-menu" role="menu">
                                        {% for k,v in  topics.items %}
                                            <li><a href="#" data-cluster="{{ k }}" data-namesvr="{{ v }}"
                                                   onclick="setClusterValue(this,'topicid1')">{{ k }} </a></li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn btn-primary" onclick="delTopic()">删除Topic</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 订阅组的管理 -->
    <div class="col-lg-6">
        <div class="panel panel-success ">
            <div class="panel-heading">
                <i class="glyphicon glyphicon-th-list"></i> 订阅组 管理
            </div>
            <div class="panel-body">

                <div class="panel panel-primary ">
                    <div class="panel-heading">
                        <i class="glyphicon glyphicon-plus"></i> 创建
                    </div>
                    <div class="form-inline panel-body">
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-btn">
                                    <button type="button" id="cluster3" data-cluster=""
                                            class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                            aria-expanded="false">选择集群 <span class="caret"></span></button>
                                    <ul class="dropdown-menu" role="menu">
                                        {% for k,v in  clusters.items %}
                                            <li><a href="#" data-cluster="{{ k }}"  data-namesvr="{{ v }}"
                                                   onclick="setClusterValue(this,'cluster3')"> {{ k }} </a></li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                            <div class="input-group">
                                <input type="text" class="form-control" id="add-subgroup-input" placeholder="新增 订阅组 ">
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary" onclick="addSubgroup()">增加 订阅组</button>
                    </div>
                </div>
                <div class="panel panel-primary ">
                    <div class="panel-heading">
                        <i class="glyphicon glyphicon-minus"></i> 删除
                    </div>

                    <div class="panel-body form-inline">
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-btn">
                                    <button type="button" id="cluster4" data-cluster=""
                                            class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                            aria-expanded="false">选择集群 <span class="caret"></span></button>
                                    <ul class="dropdown-menu" role="menu">
                                        {% for k,v in  clusters.items %}
                                            <li><a href="#" data-cluster="{{ k }}"  data-namesvr="{{ v }}"
                                                   onclick="setClusterValue(this,'cluster4')"> {{ k }} </a></li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                            <div class="input-group">
                                <div class="input-group-btn">
                                    <button type="button" id="consumer1" data-cluster=""
                                            class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                            aria-expanded="false">选择 订阅组 <span class="caret"></span></button>


                                    <ul class="dropdown-menu" role="menu">
                                        {% for g in consumer_names %}
                                            <li><a href="#" data-cluster="{{ g.value }}"
                                                   onclick="setClusterValue(this,'consumer1')"> {{ g.value }} </a></li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn btn-primary" onclick="delSubgroup()">删除 订阅组</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--broker 配置更新 -->
    <div class="col-lg-12">
        <div class="panel panel-success " id="broker-config-tab" data-borker-select-type="addr"    data-value=""
                                                    data-namesvr="">
            <div class="panel-heading">
                <i class="glyphicon glyphicon-th-list"></i> Broker 配置更新
            </div>
            <div class="panel-body">
                    <div>
                        <ul class="nav nav-tabs">
                            <li role="presentation" class="active"><a href="#broker-config-content-addr"
                                                                      data-borker-select-type="addr"><h3><span
                                    class="label label-Primary">按地址</span></h3></a></li>
                            <li role="presentation"><a href="#broker-config-content-cluster"
                                                       data-borker-select-type="cluster"><h3><span
                                    class="label label-Default">按集群</span></h3></a></li>
                        </ul>
                    </div>
                    <div class="tab-content" style="padding: 15px 15px;">
                        <div role="tabpanel" class="tab-pane active" id="broker-config-content-addr">


                            <div class="form-inline panel-body">
                                <div class="form-group">
                                    <div class="input-group">
                                        <div class="input-group-btn">
                                            <button type="button" id="broker-config-content-addr-select-but"
                                                    class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                                    aria-expanded="false">请选择Broker地址<span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu" role="menu">

                                                {% for k,v in brokerAddrs.items %}
                                                    <li><a href="#" data-value="{{ k }}" data-namesvr="{{ v }}"
                                                           onclick="setBrokerConfigValue(this,'broker-config-content-addr-select-but')">{{ k }} </a>
                                                    </li>
                                                {% endfor %}

                                            </ul>
                                        </div>
                                    </div>
                                    <div class="input-group">
                                        <span class="input-group-addon" onmouseover="this.style.cursor='hand'"
                                              data-toggle="modal" data-target="#brokerCfgModel">Key <i
                                                class="fa fa-info-circle"></i></span>
                                        <input id="basic-addon-addr-input-key" type="text" class="form-control"
                                               placeholder="Key ">
                                        <span class="input-group-addon">Value</span>
                                        <input id="basic-addon-addr-input-value" type="text" class="form-control"
                                               placeholder="Value的值">
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary" onclick="upBrokerCfg()">更新Broker配置
                                </button>
                            </div>

                        </div>
                        <div role="tabpanel" class="tab-pane" id="broker-config-content-cluster">


                            <div class="form-inline panel-body">
                                <div class="form-group">
                                    <div class="input-group">
                                        <div class="input-group-btn">
                                            <button type="button" id="broker-config-content-cluster-select-but"
                                                    class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                                    aria-expanded="false">请选择集群<span class="caret"></span></button>
                                            <ul class="dropdown-menu" role="menu">

                                                {% for k,v in clusters_namesvr_mapping.items %}
                                                    <li><a href="#" data-value="{{ k }}" data-namesvr="{{ v }}"
                                                           onclick="setBrokerConfigValue(this,'broker-config-content-cluster-select-but')">{{ k }} </a>
                                                    </li>
                                                {% endfor %}

                                            </ul>
                                        </div>
                                    </div>
                                    <div class="input-group">
                                        <span class="input-group-addon" onmouseover="this.style.cursor='hand'"
                                              data-toggle="modal" data-target="#brokerCfgModel"> Key <i
                                                class="fa fa-info-circle"></i> </span>
                                        <input id="basic-addon-cluster-input-key" type="text" class="form-control"
                                               placeholder="Key ">
                                        <span class="input-group-addon">Value</span>
                                        <input id="basic-addon-cluster-input-value" type="text" class="form-control"
                                               placeholder="Value的值">
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary" onclick="upBrokerCfg()">更新Broker配置
                                </button>


                            </div>
                        </div>

                    </div>

            </div>
        </div>
    </div>
</div>
<script>
    $('#broker-config-tab a').click(function (e) {
        e.preventDefault()
        $('#broker-config-tab').attr('data-borker-select-type', $(this).attr('data-borker-select-type'));
        $('#broker-config-tab').attr('data-namesvr', $(this).attr('data-namesvr'));
        $(this).find("h3 span").removeClass("label-Default").addClass("label-Primary");
        $(this).parent().siblings().find("a h3 span").removeClass("label-Primary").addClass("label-Default");
        $(this).tab('show');
    })
</script>

<!-- Modal -->
<div class="modal fade" id="brokerCfgModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body" role="tabpanel">

                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#brokercfg_content" aria-controls="home" role="tab"
                                                              data-toggle="tab">Broker Config</a></li>
                    <li role="presentation"><a href="#brokerNettyCfg_content" aria-controls="profile" role="tab"
                                               data-toggle="tab">Broker Netty Config</a>
                    </li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="brokercfg_content" style ="height:400px;overflow:auto; "
          ><pre>{{ brokerCfgText }}</pre></div>
                    <div role="tabpanel" class="tab-pane" id="brokerNettyCfg_content" style ="height:400px;overflow:auto; "><pre>{{ mqNettyCfgText }}</pre></div>
                </div>

            </div>

        </div>
    </div>
</div>